<template>
	<view class="login-view">
		<!-- <view class="top-bar"><uni-navbar :fixed="true" :back="false" color="#fff" title="诸城人大"></uni-navbar></view> -->

		<view class="logo-box">
			<view class="logo-ttl">
				<image class="h1-img" src="/static/img/h1_img.png" mode="widthFix"></image>
				<image class="bg-img" src="/static/img/bg_02.png" mode="widthFix"></image>
				<!-- <view class="h1">诸城人大</view> -->
			</view>
		</view>

		<u-tabs class="tab-box" :list="tabsList" :current="tabsCurrent" @change="tabsChange" :is-scroll="false"></u-tabs>

		<view v-show="tabsCurrent == 0">
			<view class="form-box">
				<u-form :model="form" ref="uForm">
					<u-form-item class="form-item" left-icon="phone-fill" prop="tel"><u-input inputAlign="left" v-model="form.tel" type="number" placeholder="请输入手机号" /></u-form-item>
					<u-form-item class="form-item" left-icon="lock-fill" prop="smsCode">
						<u-input inputAlign="left" v-model="form.smsCode" type="number" placeholder="请输入验证码"></u-input>
						<template v-slot:right>
							<view class="code" @click="getCode">{{ codeTips }}</view>
							<!-- <u-button class="code" type="error" size="mini" @click="getCode">{{ codeTips }}</u-button> -->
						</template>
						<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
					</u-form-item>
					<u-button class="form-btn" shape="circle" type="error" :customStyle="customStyle" @click="submit">登录</u-button>
				</u-form>
			</view>
		</view>
		<view v-show="tabsCurrent == 1">
			<view class="form-box">
				<u-form :model="form1" ref="uForm1">
					<u-form-item class="form-item" left-icon="account-fill" prop="username"><u-input inputAlign="left" v-model="form1.username" type="text" placeholder="请输入账号"></u-input></u-form-item>
					<u-form-item class="form-item" left-icon="lock-fill" prop="password"><u-input inputAlign="left" v-model="form1.password" type="password" placeholder="请输入密码"></u-input></u-form-item>
					<u-form-item class="form-item" left-icon="coupon-fill" v-if="codeFlag">
						<u-input inputAlign="left" v-model="form1.code" type="text" placeholder="请输入验证码" maxlength="4"></u-input>
						<template v-slot:right>
							<view class="code"><uni-img-code></uni-img-code></view>
						</template>
					</u-form-item>
				</u-form>
				<u-button class="form-btn" shape="circle" type="error" :customStyle="customStyle" @click="submitForm">登录</u-button>
			</view>
		</view>

		<!-- <view class="fiexd-box">
			<view class="fiexd-item" @click="nameLogin">
				<image class="image" :src="$staticImg('/static/img/icon_68.png')" mode="aspectFill"></image>
				提示
			</view>
		</view> -->
	</view>
</template>

<script>
import uniImgCode from '@/components/uni-img-code.vue';
import { mapState } from 'vuex';
// import { Base64 } from '@/utils/base64.js';

export default {
	name: 'uni-login',
	emits: ['change'],
	props: {
		title: {
			//标题
			type: String,
			default: ''
		}
	},
	components: {
		uniImgCode
	},
	data() {
		return {
			statusBarHeight: '0',
			tabsCurrent: 0,
			codeFlag: false,
			tabsList: [
				{
					name: '验证码登录',
					value: 0
				},
				{
					name: '密码登录',
					value: 1
				}
			],

			customStyle: {
				height: '50px',
				fontSize: '17px',
				lineHeight: '50px'
			},

			tip: '',
			show: false,
			codeTips: '获取验证码',
			form: {
				tel: '',
				smsCode: '',
				clientCode: 3707
			},
			form1: {
				username: '',
				password: '',
				clientCode: 3707,
				code: ''
			},
			rules: {
				username: [
					{
						required: true,
						message: '请输入账号',
						trigger: 'change'
					}
				],
				tel: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change']
					}
				],
				smsCode: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}
				]
			}
		};
	},
	created(option) {
		this.$store.commit('logout');
		this.$request('/sms/codeNeed').then((res) => {
			if (res.msg == 'code') {
				this.codeFlag = true;
			}
		});

		this.form1.username = uni.getStorageSync('username');
		this.form1.password = uni.getStorageSync('password');
		// this.form1.username = '370281';
		// this.form1.password = 'Dzzx@2021';
		// this.form1.password = 'dzZx@2020';
		//获取系统状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'rpx';
	},
	mounted() {
		this.$refs.uForm.setRules(this.rules);
		this.$refs.uForm1.setRules(this.rules);
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		codeTap(e) {
			this.form.clientCode = e;
			this.form1.clientCode = e;
			this.show = !this.show;
		},
		codeChange(text) {
			this.codeTips = text;
		},
		tabsChange(index) {
			this.tabsCurrent = index;
		},
		nameLogin() {
			uni.navigateTo({
				url: '/pages/login/scan'
			});
		},
		getCode() {
			let data = {};
			if (this.$refs.uCode.canGetCode) {
				this.$request('/sms/code?tel=' + this.form.tel, data, {
					load: true
				}).then((res) => {
					this.$msg('验证码已发送');
					this.$refs.uCode.start();
				});
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		submit(e) {
			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					return false;
				}
				// this.login(this.form);

				// #ifdef MP
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.login(loginRes);
					}
				});
				// #endif
				// #ifndef MP
				this.login({ code: '3707' });
				// #endif
			});
		},
		login(loginRes) {
			let form = {
				tel: this.form.tel,
				smsCode: this.form.smsCode,
				clientCode: this.form.clientCode,
				wxCode: loginRes.code
			};

			this.$request('/sms/login', form, {
				content: 'application/x-www-form-urlencoded',
				load: true
			}).then((res) => {
				if (!res.result.Authorization) {
					this.$msg('登录失败');
					return false;
				}
				this.$store.commit('login', res.result);

				// uni.switchTab({
				// 	url: '/pages/index/index'
				// });
				this.$emit('login');
			});
		},
		submitForm() {
			const imgCode = uni.getStorageSync('imgcode');
			this.$refs.uForm1.validate((valid) => {
				if (!valid) {
					return false;
				}
				if (this.codeFlag && this.form1.code.toLowerCase() !== imgCode) {
					this.$msg('验证码错误！');
					return false;
				}

				// #ifdef MP
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.loginForm(loginRes);
					}
				});
				// #endif
				// #ifndef MP
				this.loginForm({ code: '3707' });
				// #endif
			});
		},
		loginForm(loginRes) {
			let form = {
				username: this.form1.username,
				password: this.form1.password,
				// password: Base64.encode(this.form1.password + 'salt'),
				code: this.form1.code,
				clientCode: this.form1.clientCode,
				wxCode: loginRes.code
			};

			this.$request('/sys/login', form, {
				load: true
			}).then((res) => {
				if (!res.result.Authorization) {
					this.$msg('登录失败');
					return false;
				}
				this.$store.commit('login', res.result);

				uni.setStorageSync('username', this.form1.username);
				uni.setStorageSync('password', this.form1.password);

				// uni.switchTab({
				// 	url: '/pages/index/index'
				// });
				this.$emit('login');
			});
		}
	}
};
</script>

<style lang="scss">
.login-view {
	// min-height: 100vh;
	overflow: hidden;
	background: #fff no-repeat top center;
}

.logo-box {
	padding-bottom: 70rpx;
	overflow: hidden;
	// text-align: center;

	.logo-ttl {
		position: relative;
		padding: 50rpx 30rpx 20rpx;
		height: 470rpx;
	}

	.h1 {
		position: relative;
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		line-height: 64rpx;
		text-align: center;
		z-index: 1;
	}

	.h1-img {
		position: relative;
		margin: 40rpx auto;
		width: 520rpx;
		z-index: 1;
	}

	.bg-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 432rpx;
	}
}

.code-box {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 400;
	background-color: #fff;

	.code-logo {
		display: block;
		margin: 66rpx auto 48rpx;
		width: 164rpx;
		height: 164rpx;
	}

	.code-item {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 66rpx;

		.clamp {
			margin-bottom: 40rpx;
			max-width: 48%;
			width: 300rpx;
			height: 92rpx;
			font-size: 17px;
			color: #d0021b;
			line-height: 88rpx;
			border-radius: 8rpx;
			text-align: center;
			border: 1rpx solid #d0021b;
		}

		.active {
			color: #fff;
			background-color: #d0021b;
		}
	}
}

.form-box {
	position: relative;
	z-index: 300;
	margin: 30rpx 48rpx;

	.dataTime {
		width: 100%;
	}

	.form-btn {
		display: block;
		margin-top: 40rpx;
		width: 100%;
	}
}

.z-input {
	font-size: 16px;
	user-modify: read-write;
	text-align: left;
}

.fiexd-box {
	margin: 40rpx 0;

	.fiexd-item {
		padding: 20rpx 0;
		width: 100%;
		text-align: center;
	}
}
</style>
